<template>
  <q-page class="flex column">
    <div class="justify-start">
      <!-- <q-virtual-scroll
        :items="['全部', '处分']"
        virtual-scroll-horizontal
      >
        <template v-slot="{ item, index }">
          <div
            :key="index"
          >
            <q-btn flatten
                  rounded
                  color="white"
                  text-color="black"
                  class="q-ma-sm"
                  :label="item"
            />
          </div>
        </template>
      </q-virtual-scroll> -->
      <q-separator/>
    </div>
<q-infinite-scroll @load="onLoad">
    <div class="row q-col-gutter-md q-pa-md">
      <template v-for="(card, idx) in getInfoList" :key="idx">
        <div class="col-xs-12 col-sm-4 col-md-3">
          <q-card  @click="$router.push({ path: '/detail/'+card.pk })">

            <q-img :ratio="4/3" :src="imgBase + card.certpic_set[0]" fit="contain">
              <div class="absolute-bottom text-subtitle1 text-center">
                <div>{{card.cate_name}}</div>
                <div class="text-bold" v-if="card.cate.collect_type === 'name'">{{card.name}}</div>
              </div>
            </q-img>

            <q-item>
              <q-item-section top avatar>
                <y-auto-head-icon :imgBase="imgBase" :user="card.join_list[0]"/> <!--这里要设计一个获取用户信息的方法 -->
              </q-item-section>
              <q-item-section>
                <q-item-label lines="1">
                  {{card.join_list.filter(o => o.restrict_type === 'joiner').map(o => o.name).join('、')}}
                </q-item-label>
                <q-item-label caption lines="1">
                  指导教师：{{card.join_list.filter(o => o.restrict_type === 'advisor').map(t => t.name).join('、')}}
                </q-item-label>
                <q-item-label caption>{{new Date(card.achieved_date).toLocaleDateString("zh-cn")}}</q-item-label>
              </q-item-section>
            </q-item>
          </q-card>
        </div>
      </template>
    </div>
    </q-infinite-scroll>

  </q-page>
</template>

<script>
import { Notify } from 'quasar'
import yAutoHeadIcon from 'src/components/y-auto-head-icon.vue'
import { defineComponent } from 'vue'
import { mapGetters } from 'vuex'

export default defineComponent({
  components: { yAutoHeadIcon },
  created () {
    this.$store.dispatch('comp/cleanList')
  },
  computed: {
    ...mapGetters('comp', [
      'getInfoList'
    ])
  },
  methods: {
    onLoad (index, done) {
      this.$store.dispatch('comp/getListPart', [5 * (index - 1), 5])
        .then(() => {
          done()
        })
        .catch(() => {
          Notify.create('到头啦！')
        })
    }
  }
})
</script>
